<template>
    <div class="dayWu">
        <h1>第五题</h1>
        <table border="1">
            <tr>
                <td><input type="checkbox" v-model="All">全选</td>
                <td>名称</td>
                <td>价格</td>
                <td>数量</td>
                <td>总价</td>
                <td>操作</td>
            </tr>
            <tr v-for="val, i in arr" :key="i">
                <td>
                    <input type="checkbox" v-model="val.flag">
                </td>
                <td>
                    {{ val.name }}
                </td>
                <td>
                    {{ val.price }}
                </td>
                <td>
                    <button @click="jianNum(i)">-</button>
                    {{ val.number }}
                    <button @click="jiaNum(i)">+</button>
                </td>
                <td>
                    {{ val.Hprice * val.number }}
                </td>
                <td>
                    <button @click="del(i)">删除</button>
                </td>
            </tr>
            <tr>
                <td>
                    合计：
                </td>
                <td>
                    {{ Henum }}
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
export default {
    name: 'dayWuIndex',
    data() {
        return {
            arr: [
                {
                    name: '诸葛亮',
                    price: '1000',
                    number: 1,
                    Hprice: 1000,
                    flag: false
                },
                {
                    name: '蔡文姬',
                    price: '1500',
                    number: 1,
                    Hprice: 1500,
                    flag: false
                },
                {
                    name: '妲己',
                    price: '2000',
                    number: 1,
                    Hprice: 2000,
                    flag: false
                },
                {
                    name: '鲁班',
                    price: '2200',
                    number: 1,
                    Hprice: 2200,
                    flag: false
                },
            ]
        }
    },
    computed: {
        // 求和总价
        Henum: {
            get() {
                return this.arr.reduce((sum, v) => {
                    return sum += v.Hprice * v.number
                }, 0)
            }
        },
        // 全选反选
        All: {
            get() {
                return this.arr.every(res => {
                    return res.flag === true
                })
                // console.log(a);
            },
            set(v) {
                console.log(v);
                this.arr.forEach(res => {
                    return res.flag = v
                })
            }
        }
    },
    methods: {
        // 加
        jiaNum(i) {
            this.arr[i].number++
        },
        // 减
        jianNum(i) {
            this.arr[i].number--
        },
        del(v) {
            this.arr.splice(v, 1)
        }
    }
}
</script>

<style>

</style>